﻿@{
    Layout = null;
    ViewBag.Title = "购物车";
    var list = ViewData["list"] as List<Pay.DTO.cart_ex>;
    var domain = ViewData["url"] as string;
    var likelist = ViewData["likelist"] as Pay.TO.PagedResult<Pay.DTO.product_dto>;
}
<html>

<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telphone=no, email=no" />
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="msapplication-tap-highlight" content="no">
    <link rel="stylesheet" type="text/css" href="~/Content/css/reset.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/gelunbu.css" />
    <link rel="stylesheet" type="text/css" href="~/Content/css/ipt.css" />

    <style type="text/css">
        .prolistbox {
        }

        #check {
            float: left;
            margin-left: 10px;
        }

        .prowrap {
            height: 38px;
            line-height: 38px;
            border-bottom: 1px solid #D2D2D2;
        }

        .prolist_top {
            float: left;
            margin-left: 20px;
            font-size: 14px;
            color: #333333;
            background: url(images/dp_logo@2x.png) left center no-repeat;
            background-size: 12px 12px;
            padding-left: 20px;
            ;
        }

        .pro-detail {
            /* padding-bottom: 10px; */
            margin-top: 10px;
            background: #fff;
            padding: 0 10px;
            /* padding: 10px 0; */
            border-bottom: 1px solid #f2f2f2;
        }

            .pro-detail .pro-img {
                float: left;
                margin-top: 20px;
                margin-right: 6px;
            }

            .pro-detail .pro-tit {
                float: left;
                width: 60%;
                font-size: 14px;
                height: 40px;
                margin-top: 20px;
                color: #434343;
                line-height: 20px;
                font-weight: normal;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
            }

        .pro_dal {
            clear: both;
            float: left;
            padding: 4px 0;
            font-size: 14px;
            color: #434343;
        }

            .pro_dal .pro_dal_sp {
                display: inline-block;
                margin-right: 10px;
            }

            .pro_dal .pro_dal_sp {
                display: inline-block;
                margin-right: 10px;
            }

        .mt0 {
            margin-top: 0;
        }

        .pro-boxes {
            height: 30px;
            line-height: 30px;
            font-size: 15px;
            color: #434343;
            margin-top: -44px;
            text-align: right;
        }

        .yfbox {
            margin-top: 10px;
            background: #fff;
        }

        .yunfei {
            font-size: 15px;
            color: #434343;
            clear: both;
            height: 44px;
            border-bottom: 1px solid #F2F2F2;
            line-height: 44px;
            background: #fff;
            padding: 0 10px;
        }

            .yunfei .pro-total-num {
                float: right;
            }

        .yunfei {
            font-size: 15px;
            color: #434343;
            clear: both;
            height: 44px;
            border-bottom: 1px solid #F2F2F2;
            line-height: 44px;
            background: #fff;
            padding: 0 10px;
        }

            .yunfei .pro-total-num {
                float: right;
            }

        .pro-boxes {
            float: right;
        }

            .pro-boxes .pro-num {
                display: block;
            }

        .pr {
            float: right;
            width: 90%;
        }

        .pwraped {
            position: fixed;
            left: 0;
            bottom: 50px;
            width: 100%;
            height: 50px;
            background: #FFFFFF;
            box-shadow: 1px 1px 1px #333;
        }

        .pwtxt {
            position: relative;
            font-size: 12px;
        }

            .pwtxt .jsbtn {
                float: right;
                width: 70px;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #fff;
                background: #D0021B;
            }

            .pwtxt p:nth-child(1) {
                position: absolute;
                right: 85px;
                top: 14px;
            }

            .pwtxt p:nth-child(2) {
                position: absolute;
                right: 85px;
                top: 32px;
            }


        .on:before, .on:before {
            border: 1px solid #D0021B !important;
            background: #D0021B;
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
        }

        .on:after {
            content: "";
            position: absolute;
            top: 3px;
            left: 6px;
            border-right: 2px solid transparent;
            border-bottom: 2px solid transparent;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            width: 4px;
            height: 8px;
            border-color: #fff;
        }
    </style>
</head>

<body>
    <div class="prolistbox">
        @if (list != null && list.Count > 0) {
            foreach (var items in list) {
                if (items.carts != null && items.carts.Count > 0) {
                <div class="prowrap">
                    @*<input type="checkbox" id="checkall" name="check"><label for="check"></label>*@
                    <div class="prolist_top ">
                        @(items.shop_name + "-" + items.entrepot_name)
                    </div>
                </div>
                    foreach (var itemproduct in items.carts) {
                        var src = domain + itemproduct.product.first_image;

                <div class="pro-detail" style="position: relative;">
                    <input type="checkbox" class="productcheck" id="check" name="check1" style="position: absolute; top: 40px;left:0;"><label for="check"></label>
                    <input type="hidden" id="entrepotname" class="entrepotname" value="@items.entrepot_name" />
                    <input type="hidden" class="productid" value="@itemproduct.product.id" />
                    <input type="hidden" class="merchantid" value="@itemproduct.product.merchant_id" />
                    <input type="hidden" class="skuid" value="@(itemproduct.product_sku != null ? itemproduct.product_sku.id : 0)" />
                    <div class="pr">
                        <img src="@src" alt="" width="60" height="60" class="pro-img">

                        <div class="biaozhi" style="float: left; width: 75%;">

                            <h1 class="pro-tit">@itemproduct.product.name</h1>

                            <div class="pro_dal">
                                @if (itemproduct.product_sku != null) {
                                <span class="pro_dal_sp">形状:@itemproduct.product_sku.sku_name</span>
                                }
                            </div>

                            <p class="pro-boxes mt0">
                                <span class="pro-span " style="color: #D0021B;">￥@(itemproduct.product_sku != null ? itemproduct.product_sku.price : itemproduct.product.price) </span>
                                <span class="pro-num" style="color: #333;">x @itemproduct.quantity</span>
                            </p>
                        </div>
                        <div class="plussub" style="float: right;">
                            <span class="sub">-</span>
                            <input class="yzquantity1" onblur="yzquantity(1)" type="text" value="@itemproduct.quantity">
                            <span class="plus">+</span>
                        </div>
                    </div>
                    <div class="clear" style="clear:both; padding-bottom: 10px;"></div>
                    <div class="yfbox">

                        <div class="yunfei ">
                            <span style="float:right; padding-right:20px; font-size:15px; color: #D0021B;" class="etbox" onclick="del('@itemproduct.id')">删除</span>
                        </div>
                    </div>
                </div>
                    }
                }
            }

        }
    </div>
    <!--猜你喜欢-->
    <div class="like">
        <div class="like_top like-line">
            猜你喜欢
        </div>
        <ul class="related_container " style="background: #fff;">
            @if (likelist.rows != null && likelist.rows.Count > 0) {
                            foreach (var item in likelist.rows) {
                                var scr = domain + item.first_image;
            <li class="relate_item">
                <a href="/Product/ProductDetail/@item.id">
                    <img src="@scr" class="pro_list_img">
                    <p class="relate_small_title" style="text-align:center">@item.name</p>
                    <span class="relate_price" style="text-align:center">$@item.price</span>
                </a>
            </li>
}
            }

          
        </ul>
        <p class="down-loading"></p>
    </div>


    <div class="pwraped">
       
        <div class="pwtxt">

            <div class="">
                <p>总计(不含税)：<span id="sum" style="color:  #D0021B;">0.00</span></p>
            </div>

            <a href="javascript:void(0);" onclick="jiesuan()" class="jsbtn">结算(1)</a>

        </div>

    </div>


    <!--底部导航-->
    <div class="fixed_nav">
        <ul class="fixed_nav_container">
            <li>
                <a href="/Home/Index" >
                    <i class="fnav_icon_box icon_1"></i> 首页
                </a>
            </li>
            <li>
                <a href="/Product/ProductCategory" >
                    <i class="fnav_icon_box icon_2"></i> 分类
                </a>
            </li>
            <li>
                <a href="/ShopCart/ShopCartList"  class="nav_hover">
                    <i class="fnav_icon_box icon_hover_3"></i> 购物车
                </a>
            </li>
            <li>
                <a href="/User/UserInfo">
                    <i class="fnav_icon_box icon_4"></i> 我的
                </a>
            </li>
        </ul>
    </div>
</body>
</html>
<script src="~/Content/js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="~/Content/js/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="~/Content/js/web.js"></script>
<script type="text/javascript">
    var Entrepot = "";
    $(document).ready(function () {
        $(".etbox").click(function () {
            $(".pwraped").hide();
            $(".pwdrd").show();
        });

        $("#checkall").click(function (event) {
            $(this).parent().siblings('div').find('input[name="check1"]').prop("checked", true);
        });

        $(".plus").click(function (event) {
            $(this).siblings('span').css({ "display": "block" });
            var count1 = Number($(this).prev().val());
            count1++;
            $(this).prev().val(count1);
            $(this).parent().parent().parent().siblings('.pro-detail').find('input[name="check"]').prop("checked", true);
            $(this).parent().siblings('.biaozhi').find('p').find('span').eq(1).html("X " + count1);
            var price = $(this).parent().siblings('.biaozhi').find('p').find('span').eq(0).html().substring(1, $(this).parent().siblings('.biaozhi').find('p').find('span').eq(0).html().length - 1);
            var sum = $("#sum").html();
            $(this).parents(".pro-detail").find("#check").addClass("on");
            $(this).parents(".pro-detail").find("#check").attr("checked", "checked");
            if (count1 == 2) {
                $("#sum").html((parseFloat(price) * 2 + parseFloat(sum)).toFixed(2));
            } else {
                $("#sum").html((parseFloat(price) + parseFloat(sum)).toFixed(2));
            }
        });

        $(".sub").click(function (event) {
            $(this).siblings('span').css({ "display": "block" });
            var count1 = Number($(this).next().val());
            if (count1 > 1) {
                count1--;
                $(this).next().val(count1);
                $(this).parent().siblings('.biaozhi').find('p').find('span').eq(1).html("X " + count1);
                var price = $(this).parent().siblings('.biaozhi').find('p').find('span').eq(0).html().substring(1, $(this).parent().siblings('.biaozhi').find('p').find('span').eq(0).html().length - 1);
                var sum = $("#sum").html();
                $("#sum").html((parseFloat(sum) - parseFloat(price)).toFixed(2));
            }
        });

        $(".productcheck").click(function (event) {
            $(this).removeClass("on");
            if ($(this).is(':checked')) {
                if (parseFloat($("#sum").html()) == 0) {
                    Entrepot = "";
                }

                if (Entrepot == "" || Entrepot == $(this).siblings(".entrepotname").val()) {
                    Entrepot = $(this).siblings(".entrepotname").val();
                    var price = $(this).siblings('.pr').find('span.pro-span').html();
                    var count = $(this).siblings('.pr').find('span.pro-num').html();
                    count = count.substring(1, count.length)
                    var sum = $("#sum").html();
                    $("#sum").html((parseFloat(sum) + parseFloat(count) * parseFloat(price.substring(1, price.length))).toFixed(2));
                } else {
                    $(this).prop("checked", false);
                    layer.msg("不是一个集散区不能一起下单");
                }
            } else {
                $(this).removeAttr("checked");
                if (parseFloat($("#sum").html()) == 0) {
                    Entrepot = "";
                }

                if (Entrepot == "" || Entrepot == $(this).siblings(".entrepotname").val()) {
                    Entrepot = $(this).siblings(".entrepotname").val();
                    var price = $(this).siblings('.pr').find('span.pro-span').html();
                    var count = $(this).siblings('.pr').find('span.pro-num').html();
                    count = count.substring(1, count.length)
                    var sum = $("#sum").html();
                    $("#sum").html((parseFloat(sum) - parseFloat(count) * parseFloat(price.substring(1, price.length))).toFixed(2));
                } else {
                    $(this).prop("checked", false);
                    layer.msg("不是一个集散区不能一起下单");
                }
            }
        });

    });

    function yzquantity(psid) {
        var yzquantity = $(".yzquantity" + psid).val();
        var reg = /^[0-9]*$/;
        reg.test(yzquantity);
        if (reg.test(yzquantity) == false) {
            layer.msg("请输入有效数量！");
            $(".yzquantity" + psid).val(yzquantity);
        }
    }
	
    function jiesuan() {
        var list = new Array();
        if ($("#sum").html() == "" || $("#sum").html() == "0.00") {
            layer.msg("请选择你要购买的产品");
        }
        else if (parseFloat($("#sum").html()) > 2000)
        {
            layer.msg("一笔交易不能超过2000元");
        }
        else {
            $("input.productcheck:checkbox").each(function () {
                if (true == $(this).is(':checked')) {
                    var price = $(this).siblings('.pr').find('span.pro-span').html();
                    var count = $(this).siblings('.pr').find('span.pro-num').html();
                    list.push({ merchantid: $(this).siblings(".merchantid").val(), quantity: count.substring(1, count.length), productid: $(this).siblings(".productid").val(), skuid: $(this).siblings(".skuid").val() });
                }
            });
            window.location.href = "/CheckOut/FirmOrder/?model=" + JSON.stringify(list);
        }
    }

    function del(id) {
        ajax({
            url: "/ShopCart/Delete",
            data: { Id: id },
            success_msg: "删除成功",
            fail_msg: "删除失败",
            action: "refresh"
        });
    }
</script>